<template>
  <div>
    <!-- <mt-header title="我的课程">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header> -->
    <div class="header" fixed>
      <router-link to="/" >
        <div class="left">
          <img src="/logo_pic/logo.png" alt="" />
        </div>
      </router-link >
      <div class="right">
        <img src="/logo_pic/铃铛.png" alt="" />
      </div>
    </div>
    <div>
      <mt-navbar>
<router-link to="/syck"  class="syck" >   
        <mt-tab-item id="2" >所有课程</mt-tab-item>
</router-link>
      </mt-navbar>
      <div>
        <img src="/myclass/wuke.png" class="tu" />
        
        <van-cell title="查看课程日历" :value="date" @click="show = true" />
        <van-calendar v-model="show" @confirm="onConfirm" />
        <van-cell-group>
          <van-cell title="预约自习室" value="今日已约满" />
        </van-cell-group>
      </div>
      <van-image
       class="bottom"
        width="100%"
        height="28%"
        src="word/41.png"
      />
    </div>
    <!-- 底部选项卡 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="hand_pick">
        <img
          v-if="selected == 'hand_pick'"
          src="../assets/tabbar_pic/hand_pick1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/hand_pick.png"
          slot="icon"
          alt=""
        />
        精选</mt-tab-item
      >
      <mt-tab-item id="my_courses">
        <img
          v-if="selected == 'my_courses'"
          src="../assets/tabbar_pic/my_courses1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/my_courses.png"
          slot="icon"
          alt=""
        />
        我的课程</mt-tab-item
      >

      <mt-tab-item id="cdong">
        <img
          v-if="selected == 'cdong'"
          src="../assets/tabbar_pic/cdong3.png"
          slot="icon"
          alt=""
        />
        <img v-else src="../assets/tabbar_pic/cdong2.png" slot="icon" alt="" />
        虫洞</mt-tab-item
      >

      <mt-tab-item id="personal_center">
        <img
          v-if="selected == 'personal_center'"
          src="../assets/tabbar_pic/personal_center1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/personal_center.png"
          slot="icon"
          alt=""
        />
        个人中心</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>

<style scoped>
.anniu {
  border: none;
  display: block;
  margin: 0 auto;
  border-radius: 30px;
  background-color: yellow;
}
.tu {
  width: 100%;
  margin: 0 auto;
}

.zi {
  text-align: center;
  color: gray;
}
</style>

<script>
export default {
  data() {
    return {
      selected: "my_courses",
      activeIndex: "1",
      navactive: "1",
      date: "",
      show: false,
      islogin: sessionStorage.islogin
    };
  },
  watch: {
    selected(newval) {
      if (newval == "hand_pick") {
        this.$router.push("/"); //  路径 / 映射到Index.vue
      } else if (newval == "personal_center") {
        this.$router.push("/WeiPersonal"); // 路径 /Personal 映射到Personal.vue
      } else if (newval == "cdong") {
        this.$router.push("/cdong");
      } else if (newval == "my_courses") {
        if(!this.islogin){
          this.$router.push("/login")
        }else {
          this.$router.push("/myClass");
        }
      }
    },
  },
  methods: {
    // 滚动条跳转顶部
    top(){
      window.scrollTo(0,0)
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
  mounted(){
    this.top();
  }
};
</script>
<style>
.right {
  margin-right: 10px;
}
.syck{
  color:black;
  size: 20px;
  margin-left: 15px;
  font-family: inherit;
}
.bottom {
  margin-bottom: 50px;
}
</style>